<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css//main.css">
</head>

<body>
    <div id="app">

        <!-- 公用头部导航 -->
        <nav class="nav">
            <a class="goback" style="background:url(./images/icon_back.png) no-repeat -20px -25px rgba(203, 212, 116, 0);" href="javascript:history.back(1)">
               
            </a>
            <div class="nav-title">推荐旅游目的地</div>
            <div class="navright">
                <a href="#" class="email"></a>
                <a href="#" class="daka">打卡</a>
            </div>
        </nav>
        <div class="search">
            <div class="searchIcon"></div>
            <input type="text" placeholder="搜索你想去的地方">
        </div>
        <div class="picTop">
            <p><span>诗情画意，</span>山水中的彩墨美学</p>
            <ul id="sqhy">
                <!-- 在此处添加并修改结构代码，参考以下注释文档 -->
                <li v-for="(item,value) in lists"><a href="javascript:void(0);" v-if="item.topic=='诗情画意'"><img :src="'http://localhost:8080/h8/'+item.imagePath"><span>{{item.name}}</span></a></li>
            </ul>
        </div>
        <div class="picBottom">
            <p><span>一朝花枝俏，</span>且行且趋早</p>
            <ul id="yzhzq">
                <!-- 在此处添加并修改结构代码，参考以下注释文档 -->
                <li v-for="(item,value) in lists"><a href="javascript:void(0);" v-if="item.topic=='一朝花枝俏'"><img :src="'http://localhost:8080/h8/'+item.imagePath"><span>{{item.name}}</span></a></li>
            </ul>
        </div>
    </div>

</body>

</html>
<script src="./js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            lists:undefined,
            list:{
                name:"",
                topic:"",
                imagePath:""
            }
        },
        methods:{

        },
        created(){
            var that = this
            console.log('创建成功');
            axios.post("http://localhost:8080/h8/travel/list")
            .then(res=>{
                console.log(res);
                if(res.status==200&&res.data.success){
                    console.log("成功");
                    that.lists = res.data.list
                    console.log(that.lists);
                }
            })
        }
    })

</script>